<template>
    <base-breadcrumb>
        <searchData :search-data="searchArr" @search="search"/>
        
        <a-card>
          <list-table
            ref="table"
            class="export-table"
            :columns="columns"
            :request="loadData"
            :showTotalSize="false"
            :statisticsConfig="{use: true, temp: statisticsTemp}"
          >
            
            <template slot="prefix">
              <!-- <a-button @click="add1" type="primary" v-btnPermission="'tm_006_add_01'">新增计划</a-button> -->
            </template>
            
            <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
            
            <template slot="deviation" slot-scope="text">
              <ellipsis :length="30" tooltip>
                {{text}}
              </ellipsis>
            </template>
            <template slot="rectification" slot-scope="text">
              <ellipsis :length="30" tooltip>
                {{text}}
              </ellipsis>
            </template>
            
            <!-- 操作 -->
            <template slot="operation" slot-scope="text, record">
                <a @click="addEdit(record, 'view')" v-btnPermission="'tm_030_loo_04'">查看</a>
                <a-divider
                    type="vertical"
                    v-btnPermission="'tm_030_del_03'"
                />
                <a
                    @click="discard(record)"
                    v-btnPermission="'tm_030_del_03'"
                    >删除</a
                >
            </template>
          </list-table>
        </a-card>
    </base-breadcrumb>
</template>

<script>
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目
import OrgTreeSelect from '@/components/OrgTreeSelect'
import Ellipsis from '@/components/Ellipsis'
import { getProgramList, getProgramTotal, delProgram } from '@/api/technical/approvalPlan'
const searchArr = [
  // 搜索框
  // {
  //   name: '分公司',
  //   valueKey: 'branchComId',
  //   placeholder: '请选择',
  //   type: SelectSubCompany,
  // },
  {
          name: '所属单位',
          valueKey: 'searchQuery',
          type: OrgTreeSelect,
        },
  // {
  //   name: '项目名称',
  //   placeholder: '请选择',
  //   valueKey: 'projectId',
  //   keyValue: 'branchComId',
  //   type: SelectProject,
  // },
  {
    name: '方案名称',
    value: 'programName',
    placeholder: '关键字',
    type: 'input',
  },
  {
    name: '实施记录人',
    value: 'recordName',
    placeholder: '关键字',
    type: 'input',
  },
  {
    name: '实施记录时间',
    value: 'recordTime',
    type: 'dateRange',
    attr: {
      rangeFormat: ['recordDateBegin', 'recordDateEnd'],
    }
  }
]
const columns = [
    {
        title: '序号',
        width: '65px',
        scopedSlots: { customRender: 'serial' },
    },
    {
        title: '分公司',
        dataIndex: 'branchComName',
    },
    {
        title: '项目名称',
        dataIndex: 'projectName',
    },
    {
        title: '方案名称',
        dataIndex: 'programName',
    },
    {
        title: '方案与现场偏差',
        dataIndex: 'deviation',
        scopedSlots: { customRender: 'deviation' },
    },
    {
        title: '限期整改措施',
        dataIndex: 'rectification',
        scopedSlots: { customRender: 'rectification' },
    },
    {
        title: '实施记录人',
        // width: '120px',
        dataIndex: 'recordName',
    },
    {
        title: '实施记录时间',
        // width: '120px',
        dataIndex: 'recordDate',
    },
    {
        title: '操作',
        dataIndex: 'operation',
        fixed: 'right',
        width: '120px',
        scopedSlots: { customRender: 'operation' },
    },
]
export default {
    name:'a'+Date.now(),
    components: {
        SelectSubCompany,
        SelectProject,
        Ellipsis
    },
    data() {
        this.columns = columns
        return {
            searchArr,
            loadData: (parameter) => {
              let that = this
              const requestParameters = Object.assign({ needCount: true }, parameter, { query: this.queryParam })
              console.log(requestParameters)
              getProgramTotal(requestParameters)
              .then((res) => {
                  this.loading.isTable = false
                  this.from = res.data
              })
              .catch(() => {
                  this.loading.isTable = false
              })
              return getProgramList(requestParameters).then((res) => {
                return res
              })
            },
            loading: {
                isTable: false,
            },
            queryParam: {},
            from: {},
            statisticsTemp: () => {
                return (
                    <span>
                      <span style="margin-right: 10px">实施方案数量：<a> { this.from.proNum } </a>项</span>
                      方案实施记录：<a> { this.from.recordNum } </a>条
                    </span>
                )
            },
        }
    },
    computed: {
    },
    created() {
    },
    methods: {
        search(values) {
          this.queryParam = { ...values }
          this.$refs.table.refresh()
        },
        discard(e) {
            let that = this
            that.$confirm({
                title: '温馨提示',
                content: '确定是否删除数据？',
                okText: '确认',
                okType: 'danger',
                cancelText: '取消',
                onOk() {
                    return delProgram(e.id)
                        .then((res) => {
                            that.$message.success('删除成功！')
                            that.$refs.table.refresh()
                        })
                        .catch((res) => {
                            that.$message.warning('删除失败！')
                        })
                },
            })
        },
        addEdit(record) {
            this.$router.push({
                path: '/technical/ShiGroup/planRecordDetail',
                query: {
                    id: record.id,
                },
            })
        },
    },
}
</script>

<style lang="less">
.not-submit {
    display: inline-block;
    padding: 0;
    li {
        list-style: none;
        color: red;
    }
}
.submitted {
    display: inline-block;
    padding: 0;
    li {
        list-style: none;
        color: green;
    }
}
</style>
